<template>
<div>
    <ph-layer class="ph-datetime-layer" :visible="visible" :animate="true">
    </ph-layer>
    <action-sheet :class="cns" :visible="visible" v-if="isMobile">
        <slot 
            :theme="state.theme"
            :weekText="state.weekText"
            :importants="state.importants"
            :langs="langs"
            :isMobile="true"
            ></slot>
        <slot 
            :theme="state.theme"
            :lang="state.lang"
            :clear="state.clear"
            :now="state.now"
            :langs="langs"
            :isMobile="true"
            name="footer"></slot>
    </action-sheet>
    <template v-else>
        <transition name="ph-fade">
            <div :class="cns" v-show="visible" v-ph-position:v="{visible,...position}" @click.stop>
                <slot 
                    :theme="state.theme"
                    :weekText="state.weekText"
                    :importants="state.importants"
                    :langs="langs"
                    ></slot>
                <slot 
                    :theme="state.theme"
                    :lang="state.lang"
                    :clear="state.clear"
                    :now="state.now"
                    :langs="langs"
                    name="footer"></slot>
            </div>
        </transition>
    </template>
</div>
</template>
<script lang="ts">
import { computed, defineAsyncComponent, defineComponent, PropType, reactive, ref, watch, onBeforeUnmount } from 'vue'
import { PhFlex, PhLayer } from '../base'
import { Lang } from './config'
import { PhDatepickerOpt } from './index.type'
import { PhPosition } from '../../directives'
import MatchMedia from 'ph-media'

export default defineComponent({
    directives:{PhPosition},
    components:{
        PhLayer,
        ActionSheet:defineAsyncComponent(()=>import('../actionsheet/main.vue'))
    },
    props:{
        theme:{
            type:String,
            default:"dark"
        },
        weekText:{
            type:Array as PropType<Array<string>>
        },
        importants:{
            type:Array as PropType<Array<{title:string|number,md:string}>>
        },
        lang:{
            type:String,
            default:"cn"
        },
        clear:{
            type:Boolean,
            default:true
        },
        now:{
            type:Boolean,
            default:true
        },
        visible:{type:Boolean},
        double:Boolean
    },
    setup(props) {
        const state = reactive<{
            lang?:string,
            theme?:string,
            weekText?:string[],
            importants?:Array<{title:string|number,md:string}>,
            clear?:boolean,
            now?:boolean,
            [k:string]:unknown
        }>({
            lang:props.lang,
            theme:props.theme,
            weekText:props.weekText,
            importants:props.importants,
            clear:props.clear,
            now:props.now,
        })
        const position = {} as Record<string,string>
        const isMobile = ref(false)

        const langs = computed(()=>{
            return Lang[state.lang as string]
        })

        const cns = computed(()=>{
            return {
                'ph-datetime-container':true,
                'ph-ddt-container':props.double,
                'ph-datetime-dark':state.theme==="dark",
                'ph-datetime-light':state.theme==="light",
                'ph-datetime-primary':state.theme==="primary",
                'ph-datetime-success':state.theme==="success",
                'ph-datetime-danger':state.theme==="danger",
                'ph-datetime-warning':state.theme==="warning",
            }
        })
        let restoreState : ()=>void;
        const cachePosition = ({left,top,height}:PhDatepickerOpt)=>{
            Object.assign(position,{left,top,height})
        }
        const save = (opt:PhDatepickerOpt)=>{
            cachePosition(opt)
            const oldState = {...state}
            Object.keys(oldState).forEach(k=>{
                if(k in opt&&opt[k]!=undefined)
                    state[k] = opt[k] as unknown
            })
            restoreState = ()=>{
                Object.keys(oldState).forEach(k=>{
                    state[k] = oldState[k]
                })
            }
        }
        const restore = ()=>restoreState&&restoreState()
        const mediaListener = (matches:boolean)=>{
            console.log('datetime',matches)
			isMobile.value = matches
		}
        
        MatchMedia.maxWidth("768px",mediaListener)
        onBeforeUnmount(()=>{
            MatchMedia.offMaxWidth("768px",mediaListener)
        })
        return {
            restore,
            save,
            langs,
            state,
            cns,
            position,
            isMobile
        }
    }
})
</script>

<style lang="scss">
@import './datetime.scss';
</style>